import { yuangongChange, yuangongList } from "@/api/modules/yuangong";
import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import { Button, message, Space, Table } from "antd";
// import FormItems from "@/components/FormItem";
import { useEffect, useState } from "react";
// import moment from "moment";
import { useNavigate } from "react-router-dom";

// type ArrItems = {
// 	name: string;
// 	label: string;
// 	type: string;
// 	placeholder?: string;
// 	rules?: any[];
// 	options?: any[] | any;
// };
const Embedded = () => {
	const navigate = useNavigate();
	const [data, setData] = useState<any[]>([]);

	const gerUserInfo = async () => {
		const { data } = await yuangongList({});
		setData(data?.data || []);
	};

	useEffect(() => {
		gerUserInfo();
	}, []);
	// const [formVal, setFormVal] = useState<any>({});
	const [opti, setOpti] = useState<any[]>([]);
	console.log(opti);
	const columns: any[] = [
		{
			title: "序号",
			align: "center",
			render: (text: any, _: any, ind: number) => <a>{ind + 1}</a>
		},
		{
			title: "陪诊id",
			dataIndex: "code",
			key: "name",
			align: "center"
		},
		{
			title: "陪诊头像",
			key: "tel",
			render: (text: any) => {
				if (text?.imageUrl) {
					return <img src={text?.imageUrl} width={50} height={50} />;
				} else {
					return "暂无头像";
				}
			}
		},
		{
			title: "陪诊名称",
			key: "city",
			dataIndex: "name",
			align: "center"
		},
		{
			title: "联系方式",
			key: "time",
			dataIndex: "telephone",
			align: "center"
		},
		{
			title: "创建时间",
			key: "type",
			dataIndex: "createdAt",
			align: "center"
		},
		{
			title: "账号状态",
			key: "type",
			dataIndex: "type",
			align: "center"
		},
		{
			title: "操作",
			dataIndex: "",
			key: "x",
			align: "center",
			render: (text: any) => {
				console.log(text);
				// debugger
				return (
					<p style={{ display: "flex", justifyContent: "space-around", alignItems: "center" }}>
						<a>编辑</a>
						<a
							onClick={async () => {
								debugger;
								await yuangongChange({
									code: text?.code,
									status: 1
								});
								await gerUserInfo();
								message.success(`${text.status ? "启用成功" : "停用成功"}`);
							}}
						>
							{text.status ? "启用" : "停用"}
						</a>
					</p>
				);
			}
		}
	];
	// const formRef: any = useRef(null);
	// const items: ArrItems[] = [
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "name",
	// 		label: "同步下拉框",
	// 		type: "2",
	// 		options: [
	// 			{ label: "选项1", value: "1" },
	// 			{ label: "选项2", value: "2" }
	// 		]
	// 	},
	// 	{
	// 		name: "names",
	// 		label: "异步数据下拉框",
	// 		type: "2",
	// 		options: opti
	// 	},
	// 	{
	// 		name: "time",
	// 		label: "日期选择",
	// 		type: "3"
	// 	},
	// 	{
	// 		name: "times",
	// 		label: "日期范围选择",
	// 		type: "4"
	// 	},
	// 	{
	// 		name: "timeRange",
	// 		label: "时间范围选择",
	// 		type: "5"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "code",
	// 		label: "客户编码",
	// 		type: "1"
	// 	}
	// ];

	// 模拟异步
	// const items: ArrItems[] = [
	// 	{
	// 		name: "code",
	// 		label: "用户编码",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "code1",
	// 		label: "用户名称",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "code2",
	// 		label: "联系方式",
	// 		type: "1"
	// 	},
	// 	{
	// 		name: "code3",
	// 		label: "用户地区",
	// 		type: "6"
	// 	},
	// 	{
	// 		name: "code4",
	// 		label: "注册时间",
	// 		type: "3"
	// 	},
	// 	{
	// 		name: "name",
	// 		label: "用户状态",
	// 		type: "2",
	// 		options: [
	// 			{ label: "已启用", value: "0" },
	// 			{ label: "未启用", value: "1" }
	// 		]
	// 	}
	// ];
	const a = () => {
		return new Promise(response => {
			setTimeout(() => {
				response([
					{ label: "选项3", value: "3" },
					{ label: "选项4", value: "4" }
				]);
			}, 3000);
		});
	};

	// 提前请求 获取下拉框数据
	const init = async () => {
		const arr: any[] = (await a()) as any;
		setOpti(arr);
	};

	useEffect(() => {
		init();
	}, []);

	// 拓展按钮 可传可不传
	const moreButton = () => {
		return "";
	};

	// const moreOnClick = () => {
	// 	message.success("点击更多");
	// };

	// const tableSearch = () => {
	// 	message.success(JSON.stringify(formVal));
	// };

	// // 对某些 搜索条件进行处理
	// const changeSearch = (val: any) => {
	// 	if (val.time) val.time = moment(val.time).format("YYYY-MM-DD");
	// 	if (val.times) {
	// 		val.startTime = moment(val.times[0]).format("YYYY-MM-DD");
	// 		val.endTime = moment(val.times[1]).format("YYYY-MM-DD");
	// 		delete val.times;
	// 	}
	// 	if (val.timeRange) {
	// 		val.startTimes = moment(val.timeRange[0]).format("YYYY-MM-DD hh:mm:ss");
	// 		val.endTimes = moment(val.timeRange[1]).format("YYYY-MM-DD hh:mm:ss");
	// 		delete val.timeRange;
	// 	}
	// 	setFormVal(val);
	// };

	return (
		<div>
			<LayoutWhite>
				<Title word={"陪诊员工"} more={moreButton()} />
				<div style={{ display: "flex", flexDirection: "column" }}>
					<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 16 }}>
						<Space>
							{/* <Button
								onClick={() => {
									setFormVal({});
									formRef.current.reset();
								}}
							>
								重置
							</Button>
							<Button type="primary" onClick={() => tableSearch()}>
								搜索
							</Button> */}
							<Button type="primary" onClick={() => navigate("/person/add")}>
								新增
							</Button>
						</Space>
					</div>
					<Table bordered={true} columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
				</div>
			</LayoutWhite>
		</div>
	);
};
export default Embedded;
